<template>
  <div class="comments card">
    <h2 class="section-title">
      评论区
      <span class="count" v-if="comments.length > 0">({{ comments.length }})</span>
    </h2>

    <!-- 评论列表 -->
    <div class="comments-list" v-if="comments.length > 0">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <van-image
          round
          width="36"
          height="36"
          :src="comment.user.avatar || '/default-avatar.png'"
        />
        <div class="comment-content">
          <div class="user-info">
            <span class="username">{{ comment.user.nickname || comment.user.username }}</span>
            <span class="time">{{ formatCommentTime(comment.createdAt) }}</span>
          </div>
          <p class="text">{{ comment.content }}</p>
          <div class="actions">
            <van-button 
              size="small" 
              icon="like-o"
              :class="{ liked: comment.isLiked }"
              @click="handleLike(comment)"
            >
              {{ comment.likes || 0 }}
            </van-button>
            <van-button 
              size="small" 
              icon="chat-o"
              @click="handleReply(comment)"
            >
              回复
            </van-button>
          </div>
        </div>
      </div>
    </div>

    <van-empty v-else description="暂无评论" />

    <!-- 评论输入框 -->
    <div class="comment-input">
      <van-field
        v-model="newComment"
        placeholder="写下你的评论..."
        :rows="1"
        autosize
        type="textarea"
      >
        <template #button>
          <van-button 
            size="small" 
            type="primary" 
            :disabled="!newComment.trim()"
            @click="submitComment"
          >
            发送
          </van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import { showToast } from 'vant'

// 配置 dayjs
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

interface User {
  id: number
  username: string
  nickname?: string
  avatar?: string
}

interface Comment {
  id: number
  content: string
  createdAt: string
  likes: number
  isLiked: boolean
  user: User
}

const props = defineProps<{
  activityId: number
}>()

const emit = defineEmits<{
  (e: 'comment-added'): void
}>()

const comments = ref<Comment[]>([])
const newComment = ref('')
const loading = ref(false)

// 格式化评论时间
const formatCommentTime = (time: string) => {
  return dayjs(time).fromNow()
}

// 获取评论列表
const fetchComments = async () => {
  try {
    loading.value = true
    // TODO: 调用API获取评论列表
    // const response = await api.getActivityComments(props.activityId)
    // comments.value = response.data
  } catch (error) {
    console.error('获取评论失败:', error)
    showToast('获取评论失败')
  } finally {
    loading.value = false
  }
}

// 提交评论
const submitComment = async () => {
  if (!newComment.value.trim()) return
  
  try {
    loading.value = true
    // TODO: 调用API提交评论
    // await api.createComment({
    //   activityId: props.activityId,
    //   content: newComment.value
    // })
    
    showToast('评论成功')
    newComment.value = ''
    emit('comment-added')
    await fetchComments()
  } catch (error) {
    console.error('发送评论失败:', error)
    showToast('发送评论失败')
  } finally {
    loading.value = false
  }
}

// 点赞评论
const handleLike = async (comment: Comment) => {
  try {
    // TODO: 调用API点赞/取消点赞
    // await api.toggleCommentLike(comment.id)
    comment.isLiked = !comment.isLiked
    comment.likes += comment.isLiked ? 1 : -1
  } catch (error) {
    console.error('操作失败:', error)
    showToast('操作失败')
  }
}

// 回复评论
const handleReply = (comment: Comment) => {
  newComment.value = `@${comment.user.nickname || comment.user.username} `
}

// 初始化加载评论
fetchComments()
</script>

<style scoped lang="scss">
.comments {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;

  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;

    .count {
      font-size: 14px;
      color: #999;
      margin-left: 8px;
      font-weight: normal;
    }
  }

  .comments-list {
    .comment-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .comment-content {
        margin-left: 12px;
        flex: 1;

        .user-info {
          margin-bottom: 4px;

          .username {
            font-size: 14px;
            font-weight: 500;
            color: #333;
          }

          .time {
            font-size: 12px;
            color: #999;
            margin-left: 8px;
          }
        }

        .text {
          font-size: 14px;
          color: #333;
          margin: 4px 0;
          line-height: 1.5;
        }

        .actions {
          display: flex;
          gap: 12px;
          margin-top: 8px;

          .van-button {
            padding: 0 12px;
            color: #666;

            &.liked {
              color: #ff6b6b;
            }
          }
        }
      }
    }
  }

  .comment-input {
    margin-top: 16px;
    border-top: 1px solid #f5f5f5;
    padding-top: 16px;

    :deep(.van-field__button) {
      margin-left: 8px;
    }
  }
}
</style>
